<template>
	<div class='test-dialog'>
		<div class="title">
			<h3><img style="height: 30px;vertical-align: middle;margin-top: -2px;"
					src="@/assets/images/panel/trangle.png" alt="" />查询检验</h3>
			<span @click="onClose">X</span>
		</div>
		<div class="main">
			<div class="echart-box">
				<div class="head">
					<div class="left">
						<span>纵轴范围</span>
						<input type="text" placeholder="请输入" v-model="xStart"/>
						<span>-</span>
						<input type="text" placeholder="请输入" v-model="xEnd"/>
						<button @click="showChooseData">确定</button>
					</div>
					<div class="right">
						<button @click="exportChartToPng"><i class="el-icon-download"></i></button>
						<button @click="changeEchartsType"><i class="el-icon-s-data" style="margin-right: 4px;"></i>柱状图展示</button>
					</div>
				</div>
				<!-- echarts图表部分 -->
				<div class="echart" id="echart">
				</div>
			</div>
			<div style="display: flex;justify-content: space-between;">
				<div></div>
				<div class="btn">
					<button><i class="el-icon-download" style="margin-right: 5px;"></i>导出表格</button>
					<button><i class="el-icon-download" style="margin-right: 5px;"></i>导出预报和实况对比数据</button>
				</div>
			</div>
			<table border="1" cellspacing='0' style="border-collapse:collapse;border-color: #4987b9;">
				<tr>
					<td style="background-color: #3c6485;">产品/时效</td>
					<td>8月11日</td>
					<td>8月12日</td>
					<td>8月14日</td>
					<td>8月15日</td>
					<td>8月16日</td>
					<td>8月17日</td>
					<td>8月18日</td>
					<td>8月19日</td>
					<td>8月20日</td>
				</tr>
				<tr>
					<td style="background-color: #3c6485;">EC面雨量预报</td>
					<td>0.08</td>
					<td>0.08</td>
					<td>0.08</td>
					<td>0.08</td>
					<td>0.08</td>
					<td>0.08</td>
					<td>0.08</td>
					<td>0.08</td>
					<td>0.08</td>
				</tr>
			</table>
		</div>
	</div>
</template>

<script>
	import * as echarts from "echarts";
	import _ from 'lodash'
	export default {
		name: 'test-page',
		props:["xAxisData","series"],
		data() {
			return {
				msg: '查询检验弹窗',
				myChart: null,
				xStart:"",
				xEnd:"",
			}
		},
		mounted() {
			this.initEchart();
			this.updateCharts(_.cloneDeep(this.$props.xAxisData),_.cloneDeep(this.$props.series));
		},
		watch:{
			xAxisData(){
				this.updateCharts(_.cloneDeep(this.$props.xAxisData),_.cloneDeep(this.$props.series));
			},
			series(){
				this.updateCharts(_.cloneDeep(this.$props.xAxisData),_.cloneDeep(this.$props.series));
			}
		},
		methods: {
			initEchart() {
				this.myChart = echarts.init(document.getElementById('echart'))
				let option = {
					tooltip: { show: true },
					legend:{
						icon:"circle",
						textStyle:{
							color:"black",
						}
					},
					xAxis: {
						show: true,
						type: 'category',
						axisLine: {
							show: true, // 是否显示坐标轴轴线
							lineStyle: {
								color: '#356da2', // 坐标轴线线的颜色
								width: '2', // 坐标轴线线宽
								type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
							},
						},
						axisLabel: {
							show: true, // 是否显示刻度标签
							color: '#FFF', // 刻度标签文字的颜色
							fontWeight: 'normal',
							fontSize: '12', // 文字字体大小
						},
					},
					yAxis: {
						type: 'value',
						axisLine: {
							show: true, // 是否显示坐标轴轴线
							lineStyle: {
								color: '#356da2', // 坐标轴线线的颜色
								width: '2', // 坐标轴线线宽
								type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
							},
						},
						axisTick: {
							show: true, // 是否显示坐标轴刻度
							length: 5, // 坐标轴刻度的长度
							lineStyle: {
								color: '#356da2', // 刻度线的颜色
								width: 2, // 坐标轴刻度线宽
								type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
							},
						},
						axisLabel: {
							show: true, // 是否显示刻度标签
							color: '#FFF', // 刻度标签文字的颜色
							fontWeight: 'normal',
							fontSize: '12', // 文字字体大小
						},
						splitLine: { //设置不显示横向线段
							show: false
						}
					},
					grid: {
						left: '5%',
						top: '10%',
						right: '0%',
						bottom: '10%',
					},
				};
				this.myChart.setOption(option);
			},
			updateCharts(xAxisData,series){
				const option = {
					xAxis:{
						data:xAxisData,
					},
					series:series,
				}
				this.myChart && this.myChart.setOption(option);
			},
			onClose() {
				//关闭弹窗
				this.$emit('close')
			},
			changeEchartsType(){
				console.log(123);
				//改变图表的类型
				const series = _.cloneDeep(this.$props.series);
				series.forEach(item=>{
					item.type = 'bar';
				});
				this.updateCharts(series);
			},
			//将图表导出为图片
			exportChartToPng(){
				// 获取 base64 图片 URL
			if(!this.myChart){
				return;
			}
			const imgData = this.myChart.getDataURL({
                type: 'png',  // 可以选择 png 或 jpeg
                pixelRatio: 2,  // 像素比，默认是 1
                backgroundColor: '#fff'  // 背景颜色
            });

            // 创建一个隐藏的链接，用于下载图片
            const  link = document.createElement('a');
            link.href = imgData;
            link.download = 'chart.png';
            // document.body.appendChild(link);
            link.click();
            // document.body.removeChild(link);
			},

			//显示规定范围内的数据
			showChooseData(){
				const indexes = [];
				const xAxisData = [];
				this.$props.xAxisData.forEach((item,index)=>{
					const date = new Date(item);
					if(date > new Date(this.xStart) && date < new Date(this.xEnd)){
						indexes.push(index);
						xAxisData.push(_.cloneDeep(item));
					}
				});
				const series = [];
				this.$props.series.forEach(item=>{
					const data = [];
					const serie = _.cloneDeep(item);
					for(let i=0;i<item.data.length;i++){
						if(i >= indexes[0] && i < indexes[indexes.length - 1]){
							data.push(item.data[i]);
						}
					}
					serie.data = data;
					series.push(serie);
				})
				this.updateCharts(xAxisData,series);
			}
			
		},
	}
</script>

<style lang='scss' scoped>
	* {
		margin: 0;
		padding: 0;
	}
	.test-dialog {
		position: absolute;
		width: 868px;
		background-color: rgba(8, 46, 82, 0.8);
		left: 50%;
		top: 10%;
		transform: translateX(-50%);
		.title {
			padding-left: 5px;
			height: 35px;
			line-height: 35px;
			color: #fff;
			background-color: rgba(46, 84, 115, 0.7);
			display: flex;
			justify-content: space-between;
			padding-right: 10px;
			h3 {
				font-weight: normal;
				font-size: 14px;
			}
			span {
				cursor: pointer;
			}
		}
		.main {
			padding: 10px;
			.echart-box {
				height: 346px;
				.head {
					display: flex;
					justify-content: space-between;
					color: #fff;
					font-size: 14px;
					input {
						outline: none;
						margin: 0 5px;
						width: 60px;
						height: 25px;
						background-color: #3c6485;
						border: 0;
						padding-left: 5px;
						color: #fff;
						&::-webkit-input-placeholder {
							color: #fff;
							/* 设置为你想要的颜色 */
						}
					}
					.left {
						button {
							background-color: #2394ff;
							color: #fff;
							border: 0;
							height: 25px;
							padding: 0 10px;
						}
					}
					.right {
						button {
							border: 0;
							margin-left: 5px;
							height: 25px;
							background-color: #1c68a7;
							padding: 0 8px;
							color: #fff;
						}
					}
				}
				.echart {
					width: 100%;
					height: 320px;
				}
			}
			.btn {
				button {
					border: 0;
					margin-left: 5px;
					height: 25px;
					background-color: #1c68a7;
					padding: 0 8px;
					color: #fff;
				}
			}
			table {
				width: 100%;
				margin: 10px 0;
				tr {
					height: 30px;
					td {
						text-align: center;
						font-size: 14px;
						color: #fff;
					}
				}
			}
		}
	}
</style>